<template>
    <div 
        class="chart-box"
        ref="chartRef"
        :option="option"
        >
    </div>
</template>
<script lang="ts" setup>
//引入echarts模块
import { ECharts, init } from 'echarts';

//父组件传值
const props = defineProps({
	chartObject: {
		type: Object,
		default: () => {
			return {
				legend: [],
                legendShow: false,
				xData: [],
				series: []
			};
		}
	}
})
//图表ref
const chartRef = ref<HTMLDivElement>();
let myChart: ECharts;
let timer: any;
let option = reactive({});

//初始化options
const initOption = () => {
	let serieList:any = [];
	props.chartObject.series.forEach((item:any) => {
		serieList.push({
            name: item.name,
            type: item.type,
            symbol: 'circle',
            symbolSize: 5,
            stack: 'Total',
            areaStyle: item.areaStyle ? item.areaStyle : null,
            emphasis: {
                focus: 'series'
            },
            data: item.data
		});
	});
	option = {
		tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            show: props.chartObject.legendShow,
            data: props.chartObject.legend,
            top: 'bottom',
            left: 'center'
        },
        grid: {
            left: '4%',
			top: '8%',
			right: '2%',
			bottom: '20%'
        },
        color: ['#0B4ED1','#E07EF9'],
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: props.chartObject.xData,
                axisLabel: {
                    show: true,
                    color: '#011729',
                    fontSize: 12,
                    showMaxLabel: true
                },
                axisLine: {
                    lineStyle: {
                        color: '#ebecf1'
                    }
                }
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: serieList
	}
}
//初始化echarts
const initChart = ():void => {
    if(myChart !== undefined) {
        myChart.dispose();
    }
    initOption();
    myChart = init(chartRef.value as HTMLDivElement);
    //渲染echarts
    myChart?.setOption(option, true);
}

//重新渲染echarts
const resizeChart = ():void => {
    timer = setTimeout(() => {
        if(myChart !== undefined) {
            myChart.resize();
        }
    }, 500);
}

//初始化
const initPage = ():void => {
    initChart();
    window.addEventListener('resize', resizeChart);
}

//销毁
const destroyPage = ():void => {
    window.removeEventListener('resize', resizeChart);
    timer && clearTimeout(timer);
}

onMounted(() => {
    initPage();
});

onBeforeMount(() => {
    destroyPage();
})

watch(
    props.chartObject,
    () => {
        initChart();
    },
    {
        deep: true
    }
)

</script>
<style scoped>
.chart-box {
    width: 100%;
    height: 100%;
}
</style>